<template>
<!-- 员工列表 -->
  <div class="staff">
      <c-table :columns="tableColumns" 
      :datas="tableData" 
      :loading="loading" 
      showPagination  
      :paginationDatas="paginationDatas"
       @onPageSizeChange="onPageSizeChange"
       @onShowNumChange="onShowNumChange"
       :rowKey="'preAuthId'"
      >
      </c-table>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserManagementList } from '@/api/company/companys'

export default {
  name: "staff",
  components: {},
  data() {
    return {
      tableColumns: [
        {
          title: "员工姓名",
          dataIndex: "userName",
          align: 'center'
        },
        {
          title: "手机号码",
          dataIndex: "phone",
          align: 'center'
        },
        {
          title: "角色",
          dataIndex: "roleName",
          align: 'center'
        }
      ],
      tableData: [],
      paginationDatas: {
        pageSizeOptions: [ '10', '20', '30', '40', '50' ],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    };
  },
  created() {
    this.onPageOnlod()
  },
  mounted() {},
  methods: {
    onPageOnlod () {
      this.loading = true
      getUserManagementList({
         "companyId": this.$route.query.companyId,
      })
      .then(res => {
        this.tableData = res.data
        this.paginationDatas.total = res.data.total
        this.loading = false
      })
      .finally(() => {
        this.loading = false
      })
    },
    onShowNumChange(val){
      this.paginationDatas.pageNum = val
      this.onPageOnlod()
    },
    onPageSizeChange(val){
      this.paginationDatas.pageSize = val
      this.onPageOnlod()
    }
  }
};
</script>

<style lang="less" scoped>
.staff{
  margin-top: 10px;
}
</style>
